<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>websocket客户端</title>
</head>
<link th:href="@{/static/player/APlayer.min.css}" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<!--[if IE 8]>
<script type="text/javascript" th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
<![endif]-->

<script>
    $(function () {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
            //短轮循访问后台
            setInterval(ajaxMessage,5*1000);
        }else{
            openSocket();
        }
    });

    /**
     * 打开websocket
     */
    var socket;
    function openSocket() {
        var userId = $("#user_id").val();
        console.log("您的浏览器支持WebSocket");
        var socketUrl="http://localhost:9002/websocketserver/websocket/"+userId;
        socketUrl=socketUrl.replace("https","ws").replace("http","ws");
        console.log(socketUrl);
        if(socket!=null){
            socket.close();
            socket=null;
        }
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function() {
            console.log("websocket已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg);
            console.log(msg.data);
            $("#message").val(msg.data);
            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        socket.onclose = function() {
            console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            console.log("websocket发生了错误");
        }
    }

    /**
     * 短轮询 访问后台接口
     */
    function ajaxMessage() {
        var userId = $("#user_id").val();
        $.ajax({
            url:"/websocketserver/haha/getmessage",
            data:{
                userId:userId
            },
            method:"get",
            dataType:"json",
            cache:false,
            success:function (data) {
                console.log(data)
            }
        })
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
            socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
        }
    }
</script>
<body>
<div>
    <form>
        <table>
            <tr>
                <td>
                    <p>用户名</p>
                </td>
                <td>
                    <input id="user_id" hidden value="1" type="text">
                    小信
                </td>
            </tr>

            <tr>
                <td>
                    <p>您有新消息了</p>
                </td>
                <td>
                    <input id="message" type="text">
                </td>
            </tr>
        </table>
    </form>
</div>


<!--<div id="video">-->
    <!--<div class="container">-->
        <!--<div id="player" class="aplayer aplayer-withlrc"><div class="aplayer-pic"><img src="http://img4.kuwo.cn/star/starheads/240/99/22/3110345668.jpg">-->
            <!--<div class="aplayer-button aplayer-pause"><i class="demo-icon aplayer-icon-pause"></i></div><div class="aplayer-button aplayer-play aplayer-hide"><i class="demo-icon aplayer-icon-play"></i></div></div><div class="aplayer-info"><div class="aplayer-music"><span class="aplayer-title">摩天动物园</span><span class="aplayer-author"> - G.E.M.邓紫棋</span></div><div class="aplayer-lrc"><div class="aplayer-lrc-contents" style="transform: translateY(-880px);"><p class=""> 摩天动物园 - G.E.M. 邓紫棋</p><p class=""> 词：G.E.M.邓紫棋</p><p class=""> 曲：G.E.M.邓紫棋</p><p class=""> 制作人 Producer：G.E.M.邓紫棋/T-Ma 马敬恒</p><p class=""> 编曲 Arranged by：老道/G.E.M.邓紫棋/T-Ma 马敬恒</p><p class=""> 和音 Bvox：G.E.M.邓紫棋</p><p class=""> 混音 Mixed by：Richard Furch</p><p class=""> 母带 Mastered by：Randy Merrill @ Sterling Sound</p><p class=""> 传说在伊甸 原始的爱没有欺骗</p><p class=""> 简朴过每一天 人们彼此真心一片</p><p class=""> 心跟着独特节奏跳</p><p class=""> 脸挂着橘色嘴巴笑</p><p class=""> 直到蛇在身边绕 苹果让你咬</p><p class=""> 直到起重机拔掉 我们的独角</p><p class=""> 可怜的亚当 从此掉进蜘蛛网</p><p class=""> 为面包打仗 先要学会吃土壤</p><p class=""> 朴实的大象 进化变成四不像</p><p class=""> 举头望着⼋方 低头忘了思故乡</p><p class=""> ⼈人都各自 想登峰插上 ⾃己的旗帜</p><p class=""> 纯⽩的鸽子 为什么它像 变成了历史</p><p class=""> 努⼒要骑到宝马买到房子</p><p class=""> 不过是为了让⻘蛙能变成王子</p><p class=""> 穿灰衣的姑娘得不到尊重</p><p class=""> 社会大众不在乎微⼩昆虫</p><p class=""> 于是⼀群羔羊 卑微的愿望 是</p><p class=""> 努力挤进荒凉 庸俗的天堂</p><p class=""> 那些被龟赢的兔他们眼睛深红</p><p class=""> 只会每天妒忌着别人成功</p><p class=""> 于是学着蟑螂 到处爬着墙</p><p class=""> 不怕⿊也不怕脏</p><p class=""> ⼤便也舔上 为了要前往 光鲜的监房</p><p class=""> 活在摩天动物园</p><p class=""> 文明和野兽周旋</p><p class=""> 我看着⿊白的脸</p><p class=""> ⼀张张变⾊就在⼀念间</p><p class=""> ⼈的⼼太莫测幻变</p><p class=""> 纠缠在爱与恨之间</p><p class=""> 天使与魔⿁都在身边</p><p class=""> 画着没终点的圆圈</p><p class=""> 活在摩天动物园 我只能祈求上天</p><p class=""> 赐我清澈⼀双眼</p><p class=""> 一点点识破美丽的谎言</p><p class=""> 当你站在欲望边缘</p><p class=""> 突然间善恶难分辨</p><p class="aplayer-lrc-current"> 天使与魔鬼都在身边</p><p> 这时候你跪在谁跟前</p><p> 你和我⽣来都是曾经白的纸</p><p> 只是同样被写上太多歪的字</p><p> 成长最无奈的是 踏实 怕是 傻子</p><p> 你若不想被掰着吃 必须磨利牙齿</p><p> 别任⼈屠宰 必要关头只能把⼈出卖</p><p> 再无奈 也只是成功无法避开的附带</p><p> 当⿐子爱上了雾霾</p><p> ⼀开始察觉不出来</p><p> 这⼀种腐败 它像骨牌</p><p> 慢慢地覆盖 把你毒害</p><p> 单纯的⼀群⼩白猪</p><p> 被名和利薰陶摆布</p><p> 衣服都故意少块布 沦为了潮牌奴</p><p> 卖了灵魂捞财富</p><p> ⼀个个红得快速 却饿得变了排⾻</p><p> 镜子里⾯的怪物 四处无人它就败露</p><p> 当初都憧憬好莱坞</p><p> 最后通通都跑来哭</p><p> 穿灰衣的姑娘得不到尊重</p><p> 社会大众不在乎微⼩昆虫</p><p> 于是⼀群羔羊 卑微的愿望</p><p> 是努力挤进荒凉 庸俗的天堂</p><p> 那些被龟赢的兔他们眼睛深红</p><p> 只会每天妒忌着别人成功</p><p> 于是学着蟑螂 到处爬着墙</p><p> 不怕⿊也不怕脏</p><p> ⼤便也舔上 为了要前往 光鲜的监房</p><p> 活在摩天动物园</p><p> 文明和野兽周旋</p><p> 我看着⿊白的脸</p><p> ⼀张张变⾊就在⼀念间</p><p> ⼈的⼼太莫测幻变</p><p> 纠缠在爱与恨之间</p><p> 天使与魔⿁都在身边</p><p> 画着没终点的圆圈</p><p> 活在摩天动物园</p><p> 我只能祈求上天</p><p> 赐我清澈⼀双眼</p><p> 一点点识破美丽的谎言</p><p> 当你站在欲望边缘</p><p> 突然间善恶难分辨</p><p> 天使与魔鬼都在身边</p><p> 这时候你跪在谁跟前</p><p> 谁迷失在 ⽔泥的 森林里面</p><p> 谁一直踩 最低的 ⼈性底线</p><p> 谁一直还 随意地 任凭病变</p><p> 谁其实在 回忆着 认命以前</p><p> 谁迷失在 ⽔泥的 森林里面</p><p> 谁一直踩 最低的 ⼈性底线</p><p> 谁一直还 随意地 任凭病变</p><p> 谁其实在 回忆着 认命以前</p></div></div><div class="aplayer-controller"><div class="aplayer-bar-wrap"><div class="aplayer-bar"><div class="aplayer-loaded" style="width: 100%;"></div><div class="aplayer-played" style="width: 43.6401%;"><span class="aplayer-thumb"></span></div></div></div><div class="aplayer-time"> - <span class="aplayer-ptime">01:58</span> / <span class="aplayer-dtime">04:30</span><div class="aplayer-volume-wrap"><i class="demo-icon aplayer-icon-volume-down"></i><div class="aplayer-volume-bar-wrap"><div class="aplayer-volume-bar"><div class="aplayer-volume" style="height: 80%"></div></div></div></div></div></div></div></div>-->
    <!--</div>-->
    <!--<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js" type="text/javascript"></script>-->
    <!--<script type="text/javascript">-->
        <!--var ap = new APlayer({-->
            <!--element: document.getElementById('player'),-->
            <!--narrow: false,-->
            <!--autoplay: false,-->
            <!--showlrc: true,-->
            <!--music: {-->
                <!--title: '摩天动物园',-->
                <!--author: 'G.E.M.邓紫棋',-->
                <!--url: 'http://antiserver.kuwo.cn/anti.s?rid=MUSIC_83738402&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3',-->
                <!--pic: 'http://img4.kuwo.cn/star/starheads/240/99/22/3110345668.jpg'-->
            <!--}-->
        <!--});-->
        <!--ap.init();-->
    <!--</script>-->
<!--</div>-->


</body>

</html>
